import {Component, OnInit} from '@angular/core';
import {EChartsOption} from 'echarts';

interface DataAnalysisTableItem {
  lineName: string;
  siteName: string;
  deviceName: string;
  dataType: string;
  createTime: string;
}


const data = [];
const data1 = [];
let now: Date = new Date(2018, 1, 1);
const oneDay = 24 * 3600 * 1000;
let value = Math.random() * 2000;
let value1 = Math.random() * 1200;
let scrollNer;

const randomData = (init, flag) => {
  now = new Date(+now + oneDay);
  value = Math.random() * init * 300 + 220 * Math.random();
  value1 = value + Math.random() * init - 600;
  return {
    name: now.toString(),
    value: flag ? [[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'), Math.round(value1)] :
      [[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'), Math.round(value)]
  };
};
for (let i = 0; i < 3; i++) {
  data.push(randomData(12, 0));
  data1.push(randomData(51, 1));
}
const OOOption: EChartsOption = {
  title: {
    text: '重点数据监控',
    textStyle: {
      color: '#0f8bca',
      fontWeight: 'normal',
      fontSize: 12
    }
  },
  legend: {
    show: true,
    bottom: '10px',
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    trigger: 'axis',
    formatter(params): string {
      params = params[0];
      const date = new Date(params.name);
      return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
    },
    axisPointer: {
      animation: true
    }
  },
  xAxis: {
    type: 'time',
    axisTick: {
      length: 36,
      inside: true,
      lineStyle: {
        color: '#fff'
      }
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
  },
  series: [{
    name: '模拟数据',
    type: 'line',
    emphasis: {
      scale: false
    },
    data
  },
    {
      name: '模拟数据2',
      type: 'line',
      emphasis: {
        scale: false
      },
      data: data1
    }],

};

const interVal = (chartObject) => {
  setInterval(() => {


    // data.shift();
    // data1.shift();
    data.push(randomData(18, 0));
    data1.push(randomData(26, 1));

    chartObject.setOption({
      series: [{
        data
      }, {data: data1}]
    });
  }, 1000);
};

@Component({
  selector: 'app-data-analysis',
  templateUrl: './data-analysis.component.html',
  styleUrls: ['./data-analysis.component.less']
})


export class DataAnalysisComponent implements OnInit {

  constructor() {
  }

  chartOption;
  chartObject;
  tableData = [
    {
      lineName: '一号线',
      siteName: '尚双塘',
      device: '变压器',
      dataType: '电压',
      createTime: '2021-01-21 09:00:03'
    },
    {
      lineName: '二号线',
      siteName: '火车南站',
      device: 'GIS开关柜',
      dataType: '负载',
      createTime: '2021-01-21 09:01:03'
    },
    {
      lineName: '三号线',
      siteName: '灵官渡',
      device: '直流柜',
      dataType: '电流',
      createTime: '2021-01-21 10:00:33'
    },
    {
      lineName: '四号线',
      siteName: '杜花路',
      device: '变压器',
      dataType: '局放',
      createTime: '2021-02-21 21:00:39'
    }
  ];
  leftTableListData: DataAnalysisTableItem[] = [
    {
      lineName: '一号线',
      siteName: '尚双糖',
      deviceName: '变压器',
      dataType: '电压',
      createTime: new Date().getUTCDate().toLocaleString()
    },
    {
      lineName: '二号线',
      siteName: '火车南站',
      deviceName: '直流变压器',
      dataType: '电流',
      createTime: new Date().getUTCDate().toLocaleString()
    },
    {
      lineName: '三号线',
      siteName: '灵官度',
      deviceName: '变压器',
      dataType: '电压',
      createTime: new Date().getUTCDate().toLocaleString()
    },
    {
      lineName: '一号线',
      siteName: '马厂',
      deviceName: '整流器',
      dataType: '电压',
      createTime: new Date().getUTCDate().toLocaleString()
    },
    {
      lineName: '二号线',
      siteName: '锦泰广场',
      deviceName: '400V开关柜',
      dataType: '局放',
      createTime: new Date().getUTCDate().toLocaleString()
    },
    {
      lineName: '三号线',
      siteName: '洋湖',
      deviceName: '能馈装置',
      dataType: '电压',
      createTime: new Date().getUTCDate().toLocaleString()
    }
  ];
  addTimes = 0;
  startScrollFlag = false;

  ngOnInit(): void {
    this.chartOption = OOOption;
    this.addTimes = this.addTimes + 1;
    this.startScrollFlag = true;
    setInterval(() => {
      this.leftTableListData = this.leftTableListData.concat([{
        lineName: '三号线',
        siteName: '洋湖',
        deviceName: '能馈装置',
        dataType: '电压',
        createTime: new Date().toLocaleString()
      }]);
    }, 2000);

    scrollNer = setInterval(() => {
      if (this.addTimes > 0 && this.startScrollFlag) {
        this.addTimes = this.addTimes + 1;
      } else {
        clearInterval();
      }
    }, 300);
  }

  chartInit(chartObject): void {
    interVal(chartObject);
  }
}
